<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的简历</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="section-header">
        <nav class="nav">
            <div class="container">
                <div class="row">
                    <div class="nav-item col-md-2"><a href="#about" data-index="1" class="about">关于</a></div>
                    <div class="nav-item col-md-2"><a href="#works" data-index="2" class="works">作品</a></div>
                    <div class="nav-item col-md-4 back-home"><a href="#home" data-index="0" class="home-a"></a></div>
                    <div class="nav-item col-md-2"><a href="#skill" data-index="3" section-name=".skill-section" class="skill">能力</a></div>
                    <div class="nav-item col-md-2"><a href="#contact" data-index="4" section-name=".contact-section" class="contact">联系</a></div>
                </div>
            </div>
        </nav>
    </div>
    <div class="home">
        <div class="content-section">
        <p>Hi,我是小仙女</p>
        <p class="welcome">欢迎光临我的社区</p>
        <p>想了解更多，可以向下滚动哦 (>^ω^<)喵！</p>
    </div>
    <a class="scroll-tip" data-index="1" next-name=".about-section"></a>
    </div>
    <div  class="wrap about" id="about">
    <div class="about-section">
        <div class="line1">
            <span class="left-span">
                <img class="bio-icon bio-icon-1" src="img/bio-icon-1.png" alt="" >
            </span>
        <span class="rigt-span">
       <img clss="bio-text bio-text-1" src="img/bio-text-1.png" alt="" >
        </span>
        </div>
        <div class="line2">
            <span class="left-span">
                <img class="bio-icon bio-icon-2" src="img/bio-icon-2.png" alt="">
            </span>
        <span class="rigt-span">
       <img clss="bio-text bio-text-2" src="img/bio-text-2.png" alt="" >
       </span>
        </div>
        <div class="line3">
            <span class="left-span">
                <img class="bio-icon bio-icon-3" src="img/bio-icon-3.png" alt="">
            </span>
        <span class="rigt-span">
       <img clss="bio-text bio-text-3" src="img/bio-text-3.png" alt="">
       </span>
        </div>
    </div>
    <a class="scroll-tip" data-index="2" next-name=".works-section"></a>
    </div>
    <div class="wrap" id="works">
        <div class="works-section">
         <div class="container">
                <div class=" work-demo first">
                    <img src="img/yizaojia.jpg" alt="">
                    <div class="works-info">
                        <h2>喜欢我做的东西就关注我吧！</h2>
                        <p>
                        <strong>开发时间</strong>2014年3月<br>
                        <strong>工作详情</strong>：框架设计及前端制作</p>
                     
                    </div>
                </div>
                <div class="work-demo">
                    <img src="img/91zaojia.jpg" alt="">
                    <div class="works-info">
                        <h2>喜欢我做的东西就关注我吧！</h2>
                        <p>
                        <strong>开发时间</strong>2014年3月<br>
                        <strong>工作详情</strong>：框架设计及前端制作</p>
                    </div>
                </div>
                <div class=" work-demo">
                    <img src="img/wenku.jpg" alt="">
                    <div class="works-info">
                        <h2>喜欢我做的东西就关注我吧！</h2>
                        <p>
                        <strong>开发时间</strong>2014年3月<br>
                        <strong>工作详情</strong>：框架设计及前端制作</p>
                     
                    </div>
                </div>
                <div class="work-demo">
                    <img src="img/wxshop.jpg" alt="">
                    <div class="works-info">
                        <h2>喜欢我做的东西就关注我吧！</h2>
                        <p>
                        <strong>开发时间</strong>2014年3月<br>
                        <strong>工作详情</strong>：框架设计及前端制作</p>
                    </div>
                </div>
                <div class="work-demo">
                    <img src="img/shinedeliver.jpg" alt="">
                    <div class="works-info">
                        <h2>喜欢我做的东西就关注我吧！</h2>
                        <p>
                        <strong>开发时间</strong>2014年3月<br>
                        <strong>工作详情</strong>：框架设计及前端制作</p>
                    </div>
                </div>
            </div>
            <a class="more-link" href="">查看更多</a>
        </div>
        <a  class="scroll-tip" data-index="3" next-name=".skill-section"></a>
        </div>
    <div class="wrap" id="skill">
        <div class="skill-section">
            <h1>相关技能</h1>
            <ul>
            <li class="fade fade1">熟练掌握语义化的 HTML 和具有兼容性的 CSS模式，熟悉手写符合 W3C 标准的结构和代码。</li>
            <li class="fade fade3">对 可用性、可访问性、前端性能优化、最优实践 等有一定的了解和实践。</li>
            <li class="fade fade2">对 HTML5 和 CSS3 有一定了解。</li>
            <li class="fade fade4">熟练掌握 ST2 、Emmet、Sass 等等前端开发和团队协作工具。</li>
            <li class="fade fade4">熟练掌握JQuery，实现日常需要的交互效果。</li>
            <li class="fade fade3"> 熟悉EXTJS、Nodejs，MYSQL ，有一定的PHP后端相关知识。</li>
            <li class="fade fade2">了解AJax 工作原理和实现方法。</li>
            <li class="fade fade2">对前端canvas， svg有一定了解。</li>
            <li class="fade fade1">了解手机前端开发jquerymobile，zeptojs及angularjs等。</li>
            <li class="fade fade4">服务器使用阿里云ECS，对 Linux 有一定的了解</li>
            <li class="fade fade2">喜欢接触新事物，有一定的自学能力。</li>
       </ul>
        </div>
       <a class="scroll-tip" data-index="4" next-name=".contact-section"></a>
    </div>
    <div class="wrap" id="contact">
        <div class="contact-section clearfix">
            <h1>联系本人</h1>
            <div class="left">
            <div class="contact-ways fade fade1">
                <h2>社交网络</h2>
                <ul>
                    <li>邮箱：</li>
                    <li>Q Q：</li>
                    <li>知乎：</li>
                    <li>微博：</li>
                    <li>Github：</li>
                </ul>
            </div> 
            <div class="contact-info fade fade2">
                <p>虽然有社交网络，但是平时上的比较少，很多时候是只看不发！不过你可以关注我哦!</p>
            </div>  
        </div>                                                                                                                                                                                     
             <div class="right fade fade3">
                <h2>项目外包</h2>
                <p>如果你有前端相关的需求， 可以联系我做外包， 目前我主要做：</p>
                <ul>
                    <li>网站布局设计及制作，网站页面制作。</li>
                    <li>根据需求，对网站前端进行修改和优化， 或者转响应式处理。</li>
                    <li>企业网站建设及相关功能开发。</li>
                    <li>对于网站建设项目，我也有一些同行朋友可以推荐，也欢迎咨询！</li>
                </ul>
             </div>
        </div>
        <a class="scroll-tip" data-index="5"></a>
    </div>  
    <script src="./js/jquery2.2.4.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>